<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">所属单位：</label>
            <el-select
                v-model="searchForm.depId"
                class="m-2"
                placeholder="请选择所属单位"
                style="width: 145px"
                :disabled="localTypeUnit != '1'"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <el-button size="default" type="primary" @click="search"
                >查询</el-button
            >
            <el-button size="default" type="primary" @click="reset"
                >重置</el-button
            >
        </div>
    </div>
    <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        :key="activeName"
        @tab-click="handleClick"
    >
        <el-tab-pane label="智能加药系统" name="first">
            <Medicate></Medicate>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { Plus, Minus, Delete, Edit, Warning } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
// api
import schedulingHttp from "@/https/scheduling.js";
import userHttp from "@/https/user.js";
// compnents
import Medicate from "./components/medicate.vue";
import moment from "moment";
let searchForm = reactive({
    depId: "",
    inspectionLevel: "",
    dateTime: [moment(), moment().add(7, "day")],
    status: "",
    pageNo: 1,
    pageSize: 10,
});
const depIdList = ref([
    { label: "全部", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const newDepIdList = ref([
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const depNameTranslate = (depId) => {
    let depName = "";
    depIdList.value.forEach((item) => {
        if (item.value == depId) {
            depName = item.label;
        }
    });
    return depName;
};
const localTypeUnit = ref(Storage.localGet("depId"));
searchForm.depId = localTypeUnit.value;
const search = () => {};
const reset = () => {};

const activeName = ref("first");
const handleClick = () => {};
onMounted(() => {});
</script>

<style scoped lang="less">
.filter {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    .filter-item {
        margin: 0 15px 15px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        label {
            font-size: 14px;
            color: #333;
            display: inline-block;
            white-space: nowrap;
        }
    }
}
</style>